<template>
  <a-card :title="dataForm.questionTopic">
    <router-link slot="extra" to>
      <a-button @click="$router.go(-1)">返回</a-button>
    </router-link>
    <a-row :gutter="24">
      <a-col :md="6" :sm="6">
        <a-form-item label="被评估人姓名" :labelCol="{span: 12}" :wrapperCol="{span: 12, offset: 0}">
          {{ dataForm.assessedName }}
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="6">
        <a-form-item label="被评估人部门" :labelCol="{span: 12}" :wrapperCol="{span: 12, offset: 0}">
          {{ dataForm.assessedDept }}
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="6">
        <a-form-item label="问卷发布时间" :labelCol="{span: 12}" :wrapperCol="{span: 12, offset: 0}">
          {{ dataForm.createTime }}
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
<!--      <h3>-->
<!--        <span v-for="item in weight" :key="item.appraiseTiesId">-->
<!--          {{ item.appraiseTies + item.valued + '%，' }}-->
<!--        </span>权重进行加权-->
<!--        <a-popover title="权重列表">-->
<!--          <template slot="content">-->
<!--            <a-table :rowKey="(record, index) => index" bordered :columns="columns2" :dataSource="weightList" :pagination="false" />-->
<!--          </template>-->
<!--          <a-icon type="exclamation-circle" style="color: #999" />-->
<!--        </a-popover>-->
<!--      </h3>-->
      <h3>
        权重1：{{ weight.level1 }}%，
        权重2：{{ weight.level2 }}%，
        权重3：{{ weight.level3 }}%，
        权重4：{{ weight.level4 }}%，
        权重5：{{ weight.level5 }}%，
        权重6：{{ weight.level6 }}%，
        权重7：{{ weight.level7 }}%，
        权重8：{{ weight.level8 }}%，
        权重进行加权
        <a-popover title="权重列表">
          <template slot="content">
            <a-table rowKey="id" bordered :columns="columns2" :dataSource="weightList" :pagination="false"/>
          </template>
          <a-icon type="exclamation-circle" style="color: #999" />
        </a-popover>
      </h3>
    </a-row>

    <a-tabs>
      <a-tab-pane key="1" tab="统计">
        <a-table
            ref="tongji"
            size="middle"
            bordered
            :scroll="{ x: true }"
            :rowKey="(record, index) => index"
            :columns="tongji.columns"
            :dataSource="tongji.dataList"
            :pagination="false">
        </a-table>
        <div style="text-align: right;">
          <b>总分：<span style="font-size: 24px; color: #2A82E4">{{ tongjiSum }}</span></b>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="明细">
        <a-table
            ref="mingxi"
            size="middle"
            bordered
            :scroll="{ x: true }"
            :rowKey="(record, index) => index"
            :columns="mingxi.columns"
            :dataSource="mingxi.dataList"
            :pagination="false">
        </a-table>
      </a-tab-pane>
    </a-tabs>

  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'

export default {
  name: "analyse-details",
  data() {
    return {
      loading: false,
      dataForm: {
        assessedName: '',
        assessedDept: '',
        questionTopic: '',
        createTime: '',
      },
      queryParam: {
        questionId: '',
        assessedId: '',
      },
      weight: {
        level1: '0',
        level2: '0',
        level3: '0',
        level4: '0',
        level5: '0',
        level6: '0',
        level7: '0',
        level8: '0',
      },
      weightList: [],
      columns2: [
        {
          title: '权重1',
          dataIndex: 'level1',
          align: "center",
          customRender: (text) => text + '%'
        },
        {
          title: '权重2',
          dataIndex: 'level2',
          align: "center",
          customRender: (text) => text + '%'
        },
        {
          title: '权重3',
          dataIndex: 'level3',
          align: "center",
          customRender: (text) => text + '%'
        },
        {
          title: '权重4',
          dataIndex: 'level4',
          align: "center",
          customRender: (text) => text + '%'
        },
        {
          title: '权重5',
          dataIndex: 'level5',
          align: "center",
          customRender: (text) => text + '%'
        },
        {
          title: '权重6',
          dataIndex: 'level6',
          align: "center",
          customRender: (text) => text + '%'
        },
        {
          title: '权重7',
          dataIndex: 'level7',
          align: "center",
          customRender: (text) => text + '%'
        },
        {
          title: '权重8',
          dataIndex: 'level8',
          align: "center",
          customRender: (text) => text + '%'
        },
      ],
      tongjiSum: '72.00',
      tongji: {
        dataList: [
          // { id: '1', relations: '直接上级', title1: '题目1', title2: '题目2', title3: '题目3', title4: '题目4' },
          // { id: '2', relations: '相关上级', title1: '题目1', title2: '题目2', title3: '题目3', title4: '题目4' },
        ],
        columns: [
          // {
          //   title: '评估人与被评估人关系',
          //   dataIndex: 'relations',
          //   align: "center",
          //   width: 180
          // },
          // {
          //   title: '题目1',
          //   dataIndex: 'title1',
          //   align: "center",
          // },
          // {
          //   title: '题目2',
          //   dataIndex: 'title2',
          //   align: "center",
          // },
          // {
          //   title: '题目3',
          //   dataIndex: 'title3',
          //   align: "center",
          // },
          // {
          //   title: '题目4',
          //   dataIndex: 'title4',
          //   align: "center",
          // },
        ]
      },
      mingxi: {
        dataList: [
          // { id: '1', username: '评估人1', relations: '直接上级', title1: '题目1', title2: '题目2', title3: '题目3', title4: '题目4' },
          // { id: '2', username: '评估人2', relations: '相关上级', title1: '题目1', title2: '题目2', title3: '题目3', title4: '题目4' },
        ],
        columns: [
          // {
          //   title: '评估人',
          //   dataIndex: 'username',
          //   align: "center",
          // },
          // {
          //   title: '评估人与被评估人关系',
          //   dataIndex: 'relations',
          //   align: "center",
          //   width: 180
          // },
          // {
          //   title: '题目1',
          //   dataIndex: 'title1',
          //   align: "center",
          // },
          // {
          //   title: '题目2',
          //   dataIndex: 'title2',
          //   align: "center",
          // },
          // {
          //   title: '题目3',
          //   dataIndex: 'title3',
          //   align: "center",
          // },
          // {
          //   title: '题目4',
          //   dataIndex: 'title4',
          //   align: "center",
          // },
        ]
      },
      url: {
        getInfo: '/score/getAnalyseInfo',
        weightList: '/weight/getInfo',
        getTongji: '/score/scoringDetail',
        getMingxi: '/score/scoringSubsidiary',
      }
    }
  },
  watch: {
    $route: {
      handler(to, from) {
        //深度监听，同时也可监听到param参数变化
        this.$nextTick(() => {
          if (to.name === 'questionnaire-analyse-details' && (!from || from.name === 'questionnaire-basic')) {
            this.queryParam.questionId = to.query.questionId
            this.queryParam.assessedId = to.query.assessedId
            console.log('this.queryParam.questionId', this.queryParam.questionId)
            console.log('this.queryParam.assessedId', this.queryParam.assessedId)
            this.loading = true
            Promise.all([
              this.getInfo(),
              this.getWeightList(),
              this.getTongji(),
              this.getMingxi()
            ]).then(() => {
              this.loading = false
            }).catch(res => {
              this.loading = false
              console.log('res', res)
            })
          }
        })
      },
      deep: true,
      // 代表在wacth里声明了这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  methods: {
    getInfo() {
      return new Promise((resolve, reject) => {
        postAction(this.url.getInfo, this.queryParam).then(res => {
          if (!res.success) {
            return this.$message.error({
              content: res.message,
              onClose: () => reject()
            })
          }
          this.dataForm = res.result
          if (res.result.weight) {
            this.weight = res.result.weight
          }
          // this.columns2 = []
          // this.weight.forEach(res => {
          //   let columns = { title: res.appraiseTies, dataIndex: res.appraiseTiesId, align: "center", customRender: (text) => text + '%' }
          //   this.columns2.push(columns)
          // })
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
    getWeightList() {
      return new Promise((resolve, reject) => {
        getAction(this.url.weightList, { questionId: this.queryParam.questionId }).then(res => {
          if (!res.success) {
            return this.$message.error({
              content: res.message,
              onClose: () => reject()
            })
          }
          this.weightList = res.result
          // this.weightList = []
          // res.result.forEach(res => {
          //   let data = {}
          //   res.dataList.forEach(res => {
          //     data[res.appraiseTiesId] = res.valued
          //   })
          //   this.weightList.push(data)
          // })
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
    getTongji() {
      return new Promise((resolve, reject) => {
        postAction(this.url.getTongji, this.queryParam).then(res => {
          if (!res.success) {
            return this.$message.error({
              content: res.message,
              onClose: () => reject()
            })
          }
          this.tongji.dataList = []
          this.tongji.columns = []
          this.tongji.dataList = res.result.dataList
          let columns = res.result.columns
          for (let i = 0; i < columns.length; i++) {
            this.tongji.columns[i] = {
              title: columns[i],
              align: 'center',
              dataIndex: i,
            }
            let width = 200
            if (i === 0) {
              width = 100
              this.tongji.columns[i].fixed = 'left'
            }
            this.tongji.columns[i].width = width
          }
          let dataIndex = this.tongji.columns.find(res => res.title === '加权平均分').dataIndex
          this.tongjiSum = 0
          this.tongji.dataList.forEach(res => {
            this.tongjiSum += res[dataIndex]
          })
          this.tongjiSum = this.tongjiSum.toFixed(4)
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
    getMingxi() {
      return new Promise((resolve, reject) => {
        postAction(this.url.getMingxi, this.queryParam).then(res => {
          if (!res.success) {
            return this.$message.error({
              content: res.message,
              onClose: () => reject()
            })
          }
          this.mingxi.dataList = []
          this.mingxi.columns = []
          this.mingxi.dataList = res.result.dataList
          let columns = res.result.columns
          for (let i = 0; i < columns.length; i++) {
            this.mingxi.columns[i] = {
              title: columns[i],
              align: 'center',
              dataIndex: i,
            }
            let width = 200
            if (i === 0 || i === 1) {
              width = 100
              this.mingxi.columns[i].fixed = 'left'
            }
            this.mingxi.columns[i].width = width
          }
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
  }
}
</script>

<style scoped>

</style>
